<template>
	<view>
		<view class="store-list">
			<view class="store-item" v-for="(item,index) in storeList3" :key="index" @click="storeTap(index)">
				<view class="head-item border-bottom info-item">
					<view class="item-left">
						<view class="region-name" :class="[item.platform=='meituan'?'meituan':'elem']">{{item.street}}
						</view>
						<image class="head-img" :src="item.image">
						</image>
					</view>
					<view class="item-right">
						<view class="item">
							<view class="title">{{item.name}}</view>
						</view>
						<view class="item">
							<view>放单时间:</view>
							<view>{{date}}</view>
						</view>
						<view class="item">
							<view>放单:<text class="stock-text">
									{{item.total_stock}}</text></view>
							<view>还剩:<text class="stock-text">
									{{item.stock}}</text></view>
						</view>
						<view class="item">
							<view>餐标:<text class="stock-text">{{item.store_price}}</text></view>
							<image class="icon" src="@/static/img/elm-logo-ico.png" v-if="item.platform=='eleme'">
							</image>
							<image class="icon" src="@/static/img/mt-logo-ico.png" v-if="item.platform=='meituan'">
							</image>
						</view>
					</view>
				</view>
				<view class="head-item border-bottom address-item">
					<view class="address-text">评鉴规则:{{item.rule}}</view>
				</view>
			</view>
			<view class="audit">
				<view class="area flex-bet">
					<view class="title" :class="index == tabIndex ? 'active':''" v-for="(item,index) in tabList"
						:key="index" @tap="chageTab(index)">{{item}}</view>
				</view>
				<view class="list flex-y-center" v-for="(item,index) in data.data_list" :key="index">
					<view class="flex-grow-0 leftBox">
						<image :src="item.user.avatar" class="img"></image>
						<view class="name">{{item.nickname}}</view>
					</view>
					<view class="rightBox flex-grow-1">
						<view>报名时间:{{item.order_day}}</view>
						<view>订单号:{{item.order_no}}</view>
						<view>手机号:{{item.phone}}</view>
						<view class="flex" style="flex-wrap: wrap;">
							<image class="img" v-for="(item2,index2) in item.images" :key="index2" :src="item2"
								@click="checkImg(index,index2)"></image>
						</view>
					</view>
				</view>
				
				<view style="text-align:center;margin-top:120rpx" v-if="data.no_list">
					<view style="color:#444">暂无数据</view>
				</view>
				<view class="flex-y-center flex-x-center"
					style="text-align: center;height: 74rpx;color: #888;font-size: 9pt" v-if="!data.no_list&&data.no_more">
					没有更多了~</view>
				<view style="text-align: center;height: 174rpx;color: #888;font-size: 9pt"
					class="flex-y-center flex-x-center" v-if="!data.no_list&&!data.no_more">
					加载中...
				</view>
				
			</view>
			<view class="flex-bet bottom" v-if="order">
				<!-- <button class="btn">分享</button> -->
				<button v-if="order.status=='1'" class="btn" style="width: 100%;">已结算</button>
				<button v-if="order.status=='0'" class="btn" style="width: 100%;" @click="repay()">去结算</button>
			</view>
		</view>
	</view>
</template>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	import {
		getActivityDetail,
		getOrderList,
		repay,
	} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				id:0,
				oid:0,
				date:'',
				order:null,
				storeList3: [],
				tabIndex: 0,
				tabList: ['已通过', '待审核', '待上传'],
				data: {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				lock:0,
			}

		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function(t) {
			var o = this;
			o.loadDataList(function() {
				o.data.loading_more = !0;
			});
		},
		onLoad(o) {
			let id = o.id || 0;
			let oid = o.oid || 0;
			let date = o.date || new Date().toISOString().slice(0, 10);
			if (!parseInt(id) && !parseInt(oid)) {
				uni.showToast({
					title:'参数错误',
					icon:"error"
				})
				setTimeout(function(){
					uni.navigateBack({
						delta:0
					});
				},1000)
				return ;
			}
			this.id = id;
			this.date = date;
			this.oid = oid;
			this.loadData();
			this.loadDataList();
		},
		methods: {
			callpay:function(){
				let that = this;
			    if (typeof WeixinJSBridge == "undefined") {
			        if (document.addEventListener) {
			            document.addEventListener('WeixinJSBridgeReady', that.jsApiCall(), false);
			        } else if (document.attachEvent) {
			            document.attachEvent('WeixinJSBridgeReady', that.jsApiCall());
			            document.attachEvent('onWeixinJSBridgeReady', that.jsApiCall());
			        }
			    } else {
			        that.jsApiCall();
			    }
			},
			
			jsApiCall: function(){
				let that = this;
				let payParam = that.payParam;
				
			    WeixinJSBridge.invoke(
			        'getBrandWCPayRequest', {
			            appId: payParam.appId,
			            nonceStr: payParam.nonceStr,
			            package: payParam.package,
			            signType: payParam.signType,
			            timeStamp: payParam.timeStamp,
			            paySign: payParam.paySign
			        },
			        function (res) {
			            if (res.err_msg == "get_brand_wcpay_request:ok") {
							uni.showToast({
								title:'支付成功',
								icon:"success"
							});
							setTimeout(function(){
								 that.loadData();
							},1000);
			            } else {
			                WeixinJSBridge.log(res.err_msg);
							uni.showToast({
								title:'支付失败',
								icon:"error"
							});
							that.lock = 0;			
			            }
			        }
			    );
			},
			//订单支付
			repay(){
				var that = this;
				if (that.lock==1) {
					return;
				}
				if (that.order.status!='0') {
					return;
				}
				that.lock = 1;
				repay({id:that.order.id}).then((res) => {
					if(res.code == 1){
						that.payParam = res.data.wx;
						that.callpay();
					}else{
						uni.showToast({
							title:res.msg,
							icon:"error"
						});
						that.lock = 0;
					}
				}).catch(err => {
					console.log(err)
				});
					
			},
			//获取数据
			loadData: function() {
				getActivityDetail({date:this.date,id:this.id,oid:this.oid}).then((res) => {
					if (res.code == 1) {
						this.storeList3 = res.data.info;
						this.order = res.data.order;
					} else {
						uni.showToast({
							title:res.msg,
							icon:"error"
						});
						setTimeout(function(){
							uni.navigateBack({
								delta:0
							});
						},1000)
					}
				}).catch(err => {
					console.log(err)
				})
			
			},
			//获取数据列表
			loadDataList: function(f) {
				var o = this;
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
					var page = (o.data.current_page || 0) + 1;
					var data = {
						page: page,
						activity_id: o.id,
						date:o.date,
						oid:o.oid,
						current:o.tabIndex,
					}
					o.lock = 1;
					console.log(o.lock)
					getOrderList(data).then((t) => {
						if (t.code == 1) {
							if (1 == t.data.current_page && !t.data.data.length) {
								o.data.no_list = !0;
								o.data.loading_more = !1
							}
							if (t.data.data && t.data.data.length) {
								o.data.data_list = o.data.data_list || [];
								o.data.data_list = o.data.data_list.concat(t.data.data),
								o.data.current_page = page;
							}
							if (!t.data.has_more) {
								o.data.no_more = !0;
							}
						
						} else {
							uni.showToast({
								title: '网络繁忙',
								icon: 'error'
							})
						}
						o.lock = 0;
					});
				}
			},
			chageTab(index) {
				this.tabIndex = index;
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				};
				this.loadDataList();
			},
			checkImg(index, index2) {
				var _this = this
				var imgbox = _this.data.data_list[index].images;
				uni.previewImage({
					current: imgbox[index2],
					urls: imgbox
				})
			},
		}
	}
</script>

<style>
	page {
		margin-bottom: 200rpx;
	}

	.meituan {
		color: #fff !important;
		background-color: #4fbeff;
	}

	.elem {
		color: #fff !important;
		background-color: #00a9e9
	}

	.store-list .store-item {
		border-radius: 9px;
		background-color: #fff;
		margin: 9px 14px 9px 14px;
		padding: 9px 12px;
		position: relative;
		overflow: hidden
			/* 信息项 */
			/* 返现项 */
			/* 更多项 */
			/* 地址项 */
			/* 底部项 */
	}

	.store-list .store-item .head-item {
		display: flex;
		padding: 4px 0
	}

	.store-list .store-item .info-item {
		padding-top: 0
	}

	.store-list .store-item .info-item .item-left {
		position: relative
	}

	.store-list .store-item .info-item .item-left .region-name {
		position: absolute;
		top: -2px;
		right: -1px;
		color: #fff;
		font-size: 24rpx;
		border-radius: 15px 0 0 15px;
		width: 120rpx;
		height: 15px;
		text-align: center;
		z-index: 99;
	}

	.store-list .store-item .info-item .item-left .head-img {
		width: 76px;
		height: 57px;
		display: block;
		border-radius: 9px
	}

	.store-list .store-item .info-item .item-right {
		margin-left: 9px;
		width: 100%;
		display: flex;
		flex-flow: column;
		line-height: 45rpx;
	}

	.store-list .store-item .info-item .item-right .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx
	}

	.store-list .store-item .info-item .item-right .item .title {
		color: #333;
		font-size: 34rpx;
	}

	.store-list .store-item .info-item .item-right .item .icon {
		width: 20px;
		height: 20px;
	}

	.store-list .store-item .info-item .item-right .item .stock-text {
		color: #ff962a;
		font-size: 28rpx;
	}


	.store-list .store-item .info-item .item-right .item .time-region {
		width: 118px;
		padding: 1px 0;
		color: #fff;
		background-color: #8fc926;
		text-align: center;
		border-radius: 1px
	}

	.store-list .store-item .address-item {
		border-top: 1px solid #f5f5f5;
		padding: 9px 0 0;
	}

	.store-list .store-item .address-item .icon {
		width: 19px;
		height: 19px
	}

	.store-list .store-item .address-item .address-text {
		color: #999;
		font-size: 24rpx;
	}

	.audit {
		border-radius: 9px;
		background: #fff;
		margin: 9px 14px;
	}

	.audit .area {
		background-color: #fff;

		font-size: 24rpx;
		padding: 12px 12px;
		font-size: 28rpx;
	}

	.audit .area .title {
		border-radius: 40rpx;
		border: 1px solid #c1c1c1;
		color: #333;
		padding: 5px 0;
		width: 30%;
		text-align: center;
	}

	.audit .area .active {
		background: #4fbeff;
		color: #fff;
		border: 1px solid #4fbeff;

	}

	.audit .list {
		border-top: 1px solid #f6f6f6;
		padding: 20rpx;
	}

	.audit .list .leftBox {
		width: 180rpx;
		margin-right: 20rpx;
		text-align: center;
	}

	.audit .list .leftBox .img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.audit .list .leftBox .name {
		font-size: 30rpx;
		font-weight: 700;
		margin-top: 10rpx;

	}

	.audit .list .rightBox {
		color: #bbbbbb;
		line-height: 45rpx;
		font-size: 24rpx;
	}

	.audit .list .rightBox .img {
		width: 110rpx;
		height: 110rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.bottom {
		background: #fff;
		bottom: 0;
		width: 84%;
		position: fixed;
		padding: 20rpx 8%;
	}

	.bottom .btn {
		border-radius: 40rpx;
		width: 35%;
		font-size: 28rpx;
		background: #fff;
		border: 4rpx solid #e3e3e3;
		font-weight: 700;
		margin: 0;
	}
	uni-button:after{
		border: none;
	}
</style>
